<template>
	<view class="content">
		<template v-if="loading">
			<u-loading-page :loading="loading" image="/static/logo.png"></u-loading-page>
		</template>
		<template v-if="!loading">
			<goods-list :list="goodsList"></goods-list>
			<view class="padding">
				<view id="test12" v-if="Colortype==0" @click="setzfb"></view>
				<view id="green12" v-if="Colortype==1" @click="setzfb"></view>
				<view id="blue12" v-if="Colortype==3" @click="setzfb"></view>
				<view id="sheng12" v-if="Colortype==2" @click="setzfb"></view>
				<!-- 顶部搜索框 -->
				<view class="sousuobox  flexleft">
					<view class="search margin_right2"></view>
					<input class="inputs" type="text" v-model="keywordtext" placeholder="请输入你要搜索的内容"
						@confirm="goGoodList('',keywordtext)">
				</view>
				<!-- 轮播图-->
				<!-- <u-swiper :list="list1" keyName="image_text" circular :autoplay="false" height="387rpx" width="100%"
					@click="goUrl"></u-swiper> -->
				<view style="margin-top: 36rpx;">
					<swiper class="swiper" circular autoplay>
						<swiper-item v-for="item in list1" :key="item.id" @click="goUrl(item)">
							<view style="width: 100%;height: 100%;">
								<image style="width: 100%;height: 100%;" lazy-load :src="item.image_text" mode=""></image>
							</view>
							<!-- <image src="/static/1.png" mode=""></image> -->
						</swiper-item>
					</swiper>
				</view>
				<!-- 导航栏 -->
				<view class="flexleft flex_wrap">
					<view class="flexcenter gonengbox" v-for="item in cateList" :key="item.id"
						@click="goGoodList(item.id)" style="margin-top: 48rpx;">
						<view>
							<view class="gntupian">
								<!-- <view class="jujia"></view> -->
								<image :src="item.image_text" mode="aspectFill"></image>
							</view>
							<view class="text_b color_three padding_top15" style="text-align: center;">{{item.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- VIP专区 -->
				<view class=" flexbetween " style="margin-top: 58rpx;">
					<view class="flexleft">
						<view class="ggline margin_right2"></view>
						<view class="text_weight">VIP专区</view>
					</view>

					<view class="flexleft" @click="goGoodListVip">
						<view class="text_five darkblue_size" v-show="Colortype==2">查看更多</view>
						<view class="text_five reds" v-show="Colortype==0">查看更多</view>
						<view class="text_five green_size" v-show="Colortype==1">查看更多</view>
						<view class="text_five blue_size" v-show="Colortype==3">查看更多</view>
						<view class="icon" v-show="Colortype==0"></view>
						<view class="green_icon icon_s" v-show="Colortype==1"></view>
						<view class="sheng_icon icon_s" v-show="Colortype==3"> </view>
						<view class="blue_icon icon_s" v-show="Colortype==3"></view>
					</view>
				</view>
				<view class="flexbetween flex_wrap">
					<view class="shangpbox margin_top" v-for="item in vipGoodsList.data" :key="item.id"
						@click="goVipGoodsInfo(item)">
						<view class="shangptp">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="padding15 ffffff baibox">
							<view class="text_e  text_three">{{item.title}}</view>
							<view class="flexbetween margin_top5">
								<view class="text_c reds" v-show="Colortype==0">￥<text class="text_weight">{{item.price}}</text></view>
								<view class="text_c darkblue_size" v-show="Colortype==2">￥<text class="text_weight">{{item.price}}</text></view>
								<view class="text_c green_size" v-show="Colortype==1">￥<text class="text_weight">{{item.price}}</text></view>
								<view class="text_c blue_size" v-show="Colortype==3">￥<text class="text_weight">{{item.price}}</text></view>
							</view>
						</view>
					</view>
					<view class="flexcenter margin_top" v-if="!vipGoodsList.data.length">
						<image
							src="https://socialmall.yuntaiqikeji.com/uploads/20230606/ad764c5d1a730e55e1efb5d6f14c8b05.png"
							mode=""></image>
					</view>
				</view>
				<!-- 精选商品 -->
				<view class=" flexbetween " style="margin-top: 58rpx;">
					<view class="flexleft">
						<!-- <view class="ggline margin_right2"></view> -->
						<!-- <view class="text_weight">精选商品 </view> -->
						<image class="imgBox" :src="index_goods" mode=""></image>
					</view>
					<view class="flexleft" @click="goGoodList">
						<view class="text_five darkblue_size" v-show="Colortype==2">查看更多</view>
						<view class="text_five reds" v-show="Colortype==0">查看更多</view>
						<view class="text_five green_size" v-show="Colortype==1">查看更多</view>
						<view class="text_five blue_size" v-show="Colortype==3">查看更多</view>
						<view class="icon" v-show="Colortype==0"></view>
						<view class="green_icon icon_s" v-show="Colortype==1"></view>
						<view class="sheng_icon icon_s" v-show="Colortype==3"> </view>
						<view class="blue_icon icon_s" v-show="Colortype==3"></view>
					</view>
				</view>
				<view class="flexbetween flex_wrap">
					<view class="shangpbox margin_top" v-for="item in jxGoodsList.data" :key="item.id"
						@click="goGoodsInfo(item.id)">
						<view class="shangptp">
							<image :src="item.image_text" mode="aspectFill"></image>
						</view>
						<view class="padding15 ffffff baibox">
							<view class="text_e  text_three">{{item.title}}</view>
							<view class="flexbetween margin_top5">
								<view class="text_c reds" v-show="Colortype==0">￥<text class="text_weight">{{item.goodsprice.price}}</text></view>
								<!-- 后台指定不同的颜色-->
								<view class="text_c darkblue_size" v-show="Colortype==2">￥<text class="text_weight">{{item.goodsprice.price}}</text>
								</view>
								<view class="text_c green_size" v-show="Colortype==1">￥<text class="text_weight">{{item.goodsprice.price}}</text></view>
								<view class="text_c blue_size" v-show="Colortype==3">￥<text class="text_weight">{{item.goodsprice.price}}</text></view>
							</view>
						</view>
					</view>
					<view class="flexcenter margin_top" v-if="!jxGoodsList.data.length">
						<image
							src="https://socialmall.yuntaiqikeji.com/uploads/20230606/ad764c5d1a730e55e1efb5d6f14c8b05.png"
							mode=""></image>
					</view>
				</view>
				<!-- 精华帖子 -->
				<view class=" flexbetween " style="margin-top: 58rpx;">
					<view class="flexleft">
						<!-- <view class="ggline margin_right2"></view> -->
						<!-- <view class="text_weight">精华帖子</view> -->
						<image class="imgBox" :src="index_tz" mode=""></image>
					</view>
					<view class="flexleft">
						<view @click="zxInvitation">
							<view class="newest newest_green margin_right3" v-show="zx_status==1 && Colortype==1">最新
							</view>
							<view class="newest newest_blue margin_right3" v-show="zx_status==1 && Colortype==3">最新
							</view>
							<view class="newest newest_shen margin_right3" v-show="zx_status==1 && Colortype==2">最新
							</view>
							<view class="newest newest_orange margin_right3" v-show="zx_status==1 && Colortype==0">最新
							</view>
							<view class="newest hottest margin_right3" v-show="zx_status==0">最新</view>
						</view>
						<view @click="zrInvitation">
							<view class="newest hottest" v-show="zr_status==0">最热</view>
							<view class="newest newest_green " v-show="zr_status==1 && Colortype==1">最热</view>
							<view class="newest newest_blue " v-show="zr_status==1 && Colortype==3">最热</view>
							<view class="newest newest_shen " v-show="zr_status==1 && Colortype==2">最热</view>
							<view class="newest newest_orange " v-show="zr_status==1 && Colortype==0">最热</view>
						</view>
					</view>
				</view>
				<view class="justify_between flex_wrap h5">
					<view class="shangpbox margin_top" v-for="item in invitationList.data" :key="item.id"
						@click="tiezi(item.id)">
						<view class="tiezi">
							<image :src="item.images_text[0]" mode="aspectFill"></image>
						</view>
						<view class="padding15 ffffff baibox">
							<view class="text_e  text_three">{{item.title}}</view>
						</view>
						<view class="flexbetween ffffff padding15">
							<view class="flexleft">
								<image :src="item.user.avatar_text" mode="" class="kuang"></image>
								<view class="name">{{item.user.nickname}}</view>
							</view>
							<view class="flexleft">
								<image src="../../static/image/home/heart.png" mode="" class="heart" v-if="item.is_dz">
								</image>
								<image src="/static/image/home/kheart.png" mode="" class="heart" v-if="!item.is_dz">
								</image>
								<view class="num text_pee">{{item.dz_num}}</view>
							</view>
						</view>
					</view>
					<view class="flexcenter margin_top" v-if="!invitationList.data.length">
						<image
							src="https://socialmall.yuntaiqikeji.com/uploads/20230606/ad764c5d1a730e55e1efb5d6f14c8b05.png"
							mode=""></image>
					</view>
				</view>
				<view class=" flexcenter" style="padding-bottom: 200rpx;">
					<image src="../../static/image/home/bee.png" mode="" class="peen"></image>
					<view class="margin_left2 text_b color_ling">工蜂科技</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
	import goodsList from "@/components/goodList.vue"
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				goodsList: [],
				list1: [], //轮播图
				page: 1,
				limit: 12,
				keyword: "",
				sales_status: 0, //销量排序 0不排序 1降序 2升序
				price_status: 0, //价格排序 0不排序 1降序 2升序
				zh_status: 0, //综合排序 0不排序 1排序
				vipGoodsList: {
					data: []
				}, //vip商品
				category_id: "", //分类id
				jx_type: 1, //是否精选 0否 1是
				jxGoodsList: {
					data: []
				},
				keywordtext: "",
				zx_status: 1, //最新传1
				zr_status: 0, //最热传1
				invitationList: {
					data: []
				}, //帖子
				cateList: [],
				Colortype: 0, //0=褐色,1=绿色,2=深蓝,3=浅蓝
				referee_id: 0,
				index_goods: "", //精选商品
				index_tz: "", //精华帖子
				loading: true, //是否显示加载页
			}
		},
		onShareAppMessage: function(options) {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		onShareTimeline: function() {
			return {
				title: '工蜂商城',
				imageUrl: '@/static/logo.png',
				path: "pages/index/index?rec_uid=" + uni.getStorageSync("user_id"),
			}
		},
		components: {
			goodsList
		},
		onLoad(options) {
			uni.hideTabBar(); //隐藏tab
			this.getSwiper()
			this.getCateList()
			this.getVipGoods()
			this.getGoodsList()
			this.getSetColor()
			let _this = this
			// #ifdef MP-WEIXIN
			const url = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
				}
				_this.referee_id = options.rec_uid ? options.rec_uid : (theRequest.rec_uid ? theRequest.rec_uid :
					0);
				if (_this.referee_id != 0) {
					uni.setStorageSync('rec_uid', _this.referee_id);
				}
			}
			// #endif
		},
		onShow() {
			this.getInvitationList()
			uni.hideTabBar({
				animation: false
			})
			// this.Colortype = this.$store.state.type
			this.current = 0 // 公告页面和我的页面根据需要传入对应的索引号
		},
		methods: {
			setzfb() { //消息通知
				uni.navigateTo({
					url: "/pages_my/xiaoxi"
				})
			},
			getSetColor() {
				httpRequest.request('api/index/getConfigInfo', 'POST', {}).then(res => {
					this.$store.state.type = res.data.xcx_color
					this.Colortype = res.data.xcx_color
					this.index_goods = res.data.index_goods
					this.index_tz = res.data.index_tz
					uni.setNavigationBarTitle({
						title: res.data.index_title
					})
					this.loading = false
				}).catch(err => {})
			},
			getSwiper() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {

				}).then(res => {
					if (res.code == 1) {
						// res.data.forEach(item => {
						// 	uni.compressImage({
						// 		src: item.image_text,
						// 		quality: 80,
						// 		success: res => {
						// 			console.log(res.tempFilePath)
						// 		},
						// 		fail:err=> {
						// 			console.log(err);
						// 		}
						// 	})
						// })
						this.list1 = res.data
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getCateList() {
				let _this = this
				httpRequest.request('/api/goods/goodsCategory', 'GET', {
					type: 1,
				}).then(res => {
					if (res.code == 1) {
						this.cateList = res.data
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getVipGoods(isPage, page) { //获取vip商品
				let _this = this
				httpRequest.request('/api/goods/vipGoodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					keyword: _this.keyword,
					sales_status: _this.sales_status,
					price_status: _this.price_status,
					zh_status: _this.zh_status
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.vipGoodsList;
						if (isPage == true) {
							_this.vipGoodsList.data = dataList.data.concat(resList.data);
						} else {
							this.vipGoodsList = res.data
							_this.vipGoodsList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// onReachBottom() {
			// 	let _this = this;
			// 	let list = _this.vipGoodsList;
			// 	let page = _this.page;
			// 	if (list.last_page <= page) {
			// 		return false;
			// 	}
			// 	page++;
			// 	_this.page = page;
			// 	_this.getVipGoods(true, page);
			// },
			getGoodsList(isPage, page) { //精选商品
				let _this = this
				httpRequest.request('/api/goods/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					jx_type: _this.jx_type,
					category_id: _this.category_id,
					keyword: _this.keyword,
					sales_status: _this.sales_status,
					price_status: _this.price_status,
					zh_status: _this.zh_status
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.jxGoodsList;
						if (isPage == true) {
							_this.jxGoodsList.data = dataList.data.concat(resList.data);
						} else {
							this.jxGoodsList = res.data
							_this.jxGoodsList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getInvitationList(isPage, page) { //精选帖子
				let _this = this
				httpRequest.request('/api/Invitation/index', 'GET', {
					page: page || 1,
					limit: _this.limit,
					zx_status: _this.zx_status,
					zr_status: _this.zr_status,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.invitationList;
						if (isPage == true) {
							_this.invitationList.data = dataList.data.concat(resList.data);
						} else {
							this.invitationList = res.data
							_this.invitationList.data = resList.data;
						}
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			zxInvitation() { //最新帖子
				this.zx_status = 1
				this.zr_status = 0
				this.getInvitationList()
			},
			zrInvitation() { //最热帖子
				this.zr_status = 1
				this.zx_status = 0
				this.getInvitationList()
			},
			goUrl(e) {
				if (e.url) {
					uni.navigateTo({
						url: e.url
					})
				}
			},
			tiezi(id) {
				uni.navigateTo({
					url: "/pages_post/tiezixq?id=" + id
				})
			},
			goGoodList(id, text) { //商品列表
				if (!text) {
					text = ""
				}
				uni.navigateTo({
					url: "/pages_index/shangpinlb?id=" + id + "&keyWords=" + text
				})
			},
			goGoodListVip(id, text) { //商品列表
				if (!text) {
					text = ""
				}
				uni.navigateTo({
					url: "/pages_index/shangpinlbVip?id=" + id + "&keyWords=" + text
				})
			},
			goVipGoodsInfo(item) {
				uni.navigateToMiniProgram({
					// appid  写你要跳转的小程序的 appid
					appId: item.wechat_appid,
					// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
					path: item.wechat_path,
					extraData: {
						// 'type': 'out'
					},
					// 这个不写的话会显示开发环境,不能正常跳转,写上就能正常跳转了
					envVersion: 'release',
					success(res) {
						// 打开成功
						console.log("跳转成功");
						// uni.showToast({
						// 	title: '跳转成功'
						// })
					},
					fail(err) {
						// 打开失败/取消
						console.log("跳转不成功");
						// uni.showToast({
						// 	title: '跳转不成功'
						// })
					}
				})
			},
			goGoodsInfo(id) {
				uni.navigateTo({
					url: "/pages_index/shangpinxq?id=" + id
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.imgBox {
		width: 127rpx;
		height: 30rpx;
	}

	#test12 {
		position: fixed;
		right: 5px;
		z-index: 301;
		bottom: 140px;
		width: 92rpx;
		height: 92rpx;
		background-size: 100% 100%;
		border-radius: 50%;
		background-image: url("@/static/image/home/tanlun.png");
	}

	#sheng12 {
		position: fixed;
		right: 5px;
		z-index: 301;
		bottom: 140px;
		width: 92rpx;
		height: 92rpx;
		background-size: 100% 100%;
		border-radius: 50%;
		background-image: url("@/static/image/color/sheng_icon.png");
	}

	#green12 {
		position: fixed;
		right: 5px;
		z-index: 301;
		bottom: 140px;
		width: 92rpx;
		height: 92rpx;
		background-size: 100% 100%;
		border-radius: 50%;
		background-image: url("@/static/image/color/green_tan.png");
	}

	#blue12 {
		position: fixed;
		right: 5px;
		z-index: 301;
		bottom: 140px;
		width: 92rpx;
		height: 92rpx;
		background-size: 100% 100%;
		border-radius: 50%;
		background-image: url("@/static/image/color/blue_tan.png");
	}

	.peen {
		width: 34rpx;
		height: 32rpx;
	}

	.heart {
		width: 23rpx;
		height: 20rpx;
	}

	.name {
		font-size: 20rpx;
		font-weight: 500;
		color: #666666;
	}

	.num {
		margin-left: 10rpx;
		color: #666666;
	}

	.kuang {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		margin-right: 9rpx;
	}

	.newest {
		padding: 7rpx 40rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.newest_orange {
		background: rgba(212, 139, 57, 0.1);
		border: 1rpx solid #D48B39;
		color: #D48B39;
	}

	.newest_blue {
		background: RGBA(227, 238, 245, 1);
		border: 1rpx solid rgba(20, 132, 198, 1);
		color: rgba(20, 132, 198, 1);
	}

	.newest_green {
		background: RGBA(228, 243, 240, 1);
		border: 1rpx solid rgba(27, 179, 147, 1);
		color: rgba(27, 179, 147, 1);
	}

	.newest_shen {
		background: RGBA(227, 231, 234, 1);
		border: 1rpx solid rgba(17, 62, 94, 1);
		color: rgba(17, 62, 94, 1);
	}


	.hottest {
		padding: 7rpx 40rpx;
		background: rgba(153, 153, 153, 0.1);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 1rpx solid #999999;
	}

	.ggline {
		width: 8rpx;
		height: 35rpx;
		background-color: rgba(212, 139, 57, 1);
		border-radius: 23rpx 23rpx 23rpx 23rpx;
	}

	// 商品列表样式
	.shangpbox {
		width: 49%;
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}

	.tiezi {
		// width: 343rpx;
		height: 482rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}

	.shangptp {
		width: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}

	.fensetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ED8778;
	}

	.huangsetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAB536;
	}

	.gonengbox {
		width: 25%;
	}

	.gntupian {
		margin: auto;
		width: 90rpx;
		height: 90rpx;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
		}
	}

	.inputs {
		width: 90%;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.sousuobox {
		width: 90%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
	}

	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.h5 {
		padding-bottom: 80rpx;
	}
</style>